<template>
    <div>
        <div id="jx-contain">
            <div class="att-title">考勤名单</div>
            <div class="gray-line"></div>
            <div>
                年级：
                <template>
                    <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                </template>
                班级：
                <template>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                 <button class="button-style">搜&ensp;索</button>
                   <el-tooltip class="item" effect="dark" content="学生点击后签到。关闭签到后旷课次数自动统计。" placement="bottom">
                          <i  class="iconfont fr icon-tianjia-"></i>
                        </el-tooltip>
                 <button class="button-style fr">学生签到</button>
            </div>
            <div class="tip">注：此列表按照默认班级检索</div>
            <div>
                <template>
                    <el-table
                        :data="tableData3"
                        height="600"
                        border
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        label="序号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="学号">
                        </el-table-column>
                         <el-table-column
                        prop="date"
                        label="班级"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="年份"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="num"
                        sortable
                        label="旷课总次数">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.num"   @change="handleChange" :min="0" :max="100" label="旷课次数"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .el-select>>>.el-input__icon{
        line-height: 32px;
    }
    .el-input-number>>>.el-input__inner{
        height: 40px;
    }
    .el-table__row  .el-input-number>>>.el-input__inner{
        border: none;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease, .el-table__row  .el-input-number>>>.el-input-number__increase{
         height: 17px;
         width: 17px;
        border-radius: 50%;
        border: 1px solid #dcdfe6;
        top: 10px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease{
       left: 46px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__increase{
       right: 46px;
    }
    .el-table__row   .el-input-number>>>[class*=" el-icon-"],.el-table__row  .el-input-number>>> [class^=el-icon-]{
        position: absolute;
        left: 2px;
        top: 2px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    #jx-contain{
        width: 1120px;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        background: $white;
        padding: 16px 40px;
        .att-title{
            color: $blue;
            font-size: $fs16;
            margin-bottom: 16px;
        }
        .gray-line{
            background: $grayLine;
            height: 1px;
            width: 1200px;
            margin: 0 0 24px -40px;
        }
    }
    .tip{
        color: $btn-blue;
        margin: 22px 0 40px;
    }
    .iconfont {
        margin: 6px 0 0 10px;
    }

</style>
<script>
    export default {
        data() {
        return {
            tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:4
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:3
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:19
        }, {
          date: '2016-05-02',
           name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:15
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:15
        }, {
          date: '2016-05-02',
           name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:15
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:13
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:12
        }, {
          date: '2016-05-08',
           name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:11
        }, {
          date: '2016-05-06',
         name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:4
        }, {
          date: '2016-05-07',
           name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          num:3
        }],
            num8: 1,
            options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
                value: ''
            }
        },
        methods: {
        handleChange(value) {
            console.log(value);
        }
        }

    };
</script>
